.container{
display:grid;
/* 인자 개수가 column 개수 */
grid-template-columns: 50px 50px;
grid-template-rows: 50px 50px;
/* 아니면 이런식으로 함수를 써도된다.
100개 row grid 각 50px */
grid-template-rows: repeat(100, 50px);
repeat(2, 1fr 50px) 20px
/* 1fr 50px 1fr 50px 20px 와 같음*/
grid-template-columns: repeat(auto-fill, minmax(50px, 200px)); /* 최소 최대 사이즈 지정 */
/* auto-fill은 크기가 허용하는 한 자동으로 채워넣음 */
/* auto-fit 은 더 넣을 수 없으면 나머지 item들을 크게 해서 맞춰줌 */
grid-column-gap: 10px; column사이 공간
grid-gap: 10px 20px; 위에거 축약
justify-items: 전체에 대해;
align-items: 전체에 대해;
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
/*같은 이름으로 영역 설정하고 grid-area로 주면 다 차지함 */
}
template에 쓸 수 있는 값 중
fr: fraction of available space 1fr 2fr
auto: 나머지
%
/*개별 아이템의 꾸미기 */
3칸이면 1,2,3,4 임
.item{
grid-column: 1/3; 시작 / 끝
grid-row: 1/2;
justify-self: start/center/end/stretch(default);
align-self: 수직으로 정렬;
grid-area: header;
아니면 1/1/2/4 이런식으로 column 위치/row위치/c위치끝/r위치끝 으로 영역 지정이 가능하다
grid-area: 1/1/2/4;
}
—
이런식으로 media query를 쓸수 있다.
.container {
font-size: 1.5em;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 50px auto 1fr auto;
grid-gap: 10px;
grid-template-areas:
"header"
"advert"
"content"
"footer";
}
@media (min-width: 300px){
.container{
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"advert header"
"advert content"
"advert footer";
}
}
@media (min-width: 400px){
.container{
grid-template-areas:
"header header"
"advert content"
"footer footer";
}
}